<template>
    <div style="width:100%;padding:0;margin: 0;">
      <!--        显示题目内容和编辑框-->
      <el-card   v-for="(item,id) in arr" :shadow="ifShadow(item)" :key="item.id" style="margin: 0;">

          <!--        单选-->
          <template v-if="item.type=='dan'" >
            <single-choice :item="item" :id="id" :auto-id="showId"
                           @moveUp="moveUp(id)" @moveDown="moveDown(id)"
                           @copyMe="copyMe(item,id)" @deleteMe="deleteMe(id)"
            ></single-choice>
          </template>

          <!--        多选-->
          <template v-else-if="item.type=='mul'" >
            <mul-choice :item="item" :id="id" :auto-id="showId"
                        @moveUp="moveUp(id)" @moveDown="moveDown(id)"
                        @copyMe="copyMe(item,id)" @deleteMe="deleteMe(id)"
            ></mul-choice>
          </template>

          <!--        填空-->
          <template v-else-if="item.type=='tk'">
            <single-tiankong
                :item="item" :id="id" :auto-id="showId"
                @moveUp="moveUp(id)" @moveDown="moveDown(id)"
                @copyMe="copyMe(item,id)" @deleteMe="deleteMe(id)"
            ></single-tiankong>
          </template>

          <!--        评分-->
          <template v-else-if="item.type=='rate'">
            <rate-slider
                :item="item" :id="id" :showId="showId" :auto-id="showId"
                @moveUp="moveUp(id)" @moveDown="moveDown(id)"
                @copyMe="copyMe(item,id)" @deleteMe="deleteMe(id)"
            ></rate-slider>
          </template>

      </el-card>

<!--      添加题目-->
      <el-card shadow="never"  v-if="isAdding" style="margin:0 auto;padding:20px 30px 0px 30px;text-align: left;">

<!--        添加单选-->
        <div v-if="addType=='dan'">
          <el-form v-model="addDanObj" >
            <add-question-head
                :thisquestion="addDanObj"
            ></add-question-head>
            <el-form-item  v-for="(option,opindex) in addDanObj.options" :key="opindex" style="width:90%;margin: 3px auto;">
              <span style="font-size:16px;line-height: 1.3;">选项{{opindex+1}}：</span>
              <el-input  style="width: 70%;" v-model="option.val" :value="option.val"  :disabled=ifDisable(option) type="textarea" :autosize="{ minRows: 1}"></el-input>
              <el-button circle style="margin-left: 5px;" :icon="editOrSaveOptionIcon(option)" @click.prevent="editItemOption(opindex,addDanObj)" ></el-button>
              <el-button circle style="margin-left: 5px;" icon="el-icon-delete" @click.prevent="removeItemOption(opindex,addDanObj)" ></el-button>
              <el-button circle style="margin-left: 5px;" icon="el-icon-plus" @click.prevent="addItemOptionAfterMe(opindex,addDanObj)" ></el-button>
            </el-form-item>
          </el-form>
        </div>

<!--        添加多选-->
        <div v-else-if="addType=='mul'">
          <el-form v-model="addMulObj" >
            <add-question-head
                :thisquestion="addMulObj"
            ></add-question-head>

            <el-form-item style="width:90%;margin: 3px auto;" v-for="(option,opindex) in addMulObj.options" :key="opindex" >
              <span style="font-size:16px;line-height: 1.3;">选项{{opindex+1}}：</span>
              <el-input  style="width: 70%;" v-model="option.val" :value="option.val"  :disabled=ifDisable(option) type="textarea" :autosize="{ minRows: 1}"></el-input>
              <el-button circle style="margin-left: 5px;" :icon="editOrSaveOptionIcon(option)" @click.prevent="editItemOption(opindex,addMulObj)" ></el-button>
              <el-button circle style="margin-left: 5px;" icon="el-icon-delete" @click.prevent="removeItemOption(opindex,addMulObj)" ></el-button>
              <el-button circle style="margin-left: 5px;" icon="el-icon-plus" @click.prevent="addItemOptionAfterMe(opindex,addMulObj)" ></el-button>
            </el-form-item>
          </el-form>
        </div>

<!--        添加填空-->
        <div v-else-if="addType=='tk'">
          <el-form v-model="addTkObj"  >
            <add-question-head
                :thisquestion="addTkObj"
            ></add-question-head>
          </el-form>
        </div>


        <div v-else-if="addType=='rate'">
          <el-form v-model="addRateObj"  >
            <add-question-head
                :thisquestion="addRateObj"
            ></add-question-head>
          </el-form>
        </div>


<!--        两个按钮-->
        <el-button-group  style="margin: 3px auto;position:relative;left:34%" >
          <el-button size="mini" icon="el-icon-check" @click="Save()">保存本题</el-button>
          <el-button  size="mini"  icon="el-icon-close" @click="notSave()">取消本题</el-button>
        </el-button-group>

      </el-card>
      </div>

</template>
<script>
import SingleChoice from "../../../components/EditQuestionnaire/SingleChoice";
import MulChoice from "../../../components/EditQuestionnaire/MulChoice";
import SingleTiankong from "../../../components/EditQuestionnaire/SingleTiankong";
import RateSlider from "../../../components/EditQuestionnaire/RateSlider";

import AddQuestionHead from "../../../components/EditQuestionnaire/AddQuestionHead";
export default {
  name:'editbody',
  components:{
    SingleChoice,MulChoice,SingleTiankong,RateSlider,AddQuestionHead
  },
  props:{
    showId:Boolean,
  },
  data(){
    return {

      isAdding:false,
      addType:null,
      isShow:true,
      addDanObj:{
        id:null,
        isEditing:true,
        bidati:false,
        type:'dan',
        title:'',
        note:'',
        options: [
          {
            val:'', notEditing:false,
          } ,
        ],
        radio:null,
      },
      addMulObj:{
        id:null,
        bidati:false,
        isEditing:true,
        type:'mul',
        title:'',
        note:'',
        options: [
          {
            val:'',notEditing:false,
          } ,
        ],
        checked:[],
      },
      addTkObj:{
        id:null,
        bidati:false,
        isEditing:true,
        type:'tk',
        title:'',
        note:'',
        text:'',
      },
      addRateObj:{
        id:null,
        bidati:false,
        isEditing: true,
        type:'rate',
        title:'',
        note:'',
        val:0,
      },
      arr:[
        // {
        //   id:1,
        //   isEditing:false,
        //   type:'mul',
        //   title:'多选标题1',
        //   // options: ['qwq','TAT','orz','QwQ'],
        //   options: [
        //     {
        //       val:'qwq',notEditing:true,
        //     } ,
        //     {
        //       val:'TAT',notEditing:true,
        //     } ,
        //     {
        //       val:'orz',notEditing:true,
        //     } ,
        //     {
        //       val:'QwQ',notEditing:true,
        //     }
        //   ],
        //   checked:[],
        // },{
        //   id:0,
        //   isEditing:false,
        //   type:'dan',
        //   title:'单选标题1',
        //   options: [
        //     {
        //       val:'AAAAAAAA', notEditing:true,
        //     } ,
        //     {
        //       val:'b',notEditing:true,
        //     } ,
        //     {
        //       val:'c',notEditing:true,
        //     } ,
        //     {
        //       val:'d',notEditing:true,
        //     }
        //   ],
        //   radio:null,
        // },
        //
        // {
        //   id:2,
        //   isEditing:false,
        //   type:'tk',
        //   title:'填空标题1',
        //   text:'',
        // },
        // {
        //   id:3,
        //   isEditing: false,
        //   type:'rate',
        //   title:'评分标题1',
        //   val:0,
        // }

      ]
    }
  },
  watch:{
  },
  computed:{
    ifShadow(){
      return function (item){
        return (item.isEditing)? "never": "always";
      }
    },
    editOrSaveIcon(){
      return function (item){
         return (item.isEditing)?"el-icon-finished":"el-icon-edit";
      }
    },
    editOrSaveWords(){
      return function (item){
        return (item.isEditing)?"保存":"编辑";
      }
    },
    editOrSaveOptionIcon(){
      return function (option){
        return (option.notEditing)?"el-icon-edit":"el-icon-finished";
      }
    },
    ifDisable(){
      return function (option){
        return (option.notEditing)? true: false;
      }
    }

  },
  methods:{
   editItemOption:function (opindex,item){
      if(item.options[opindex].notEditing){
        item.options[opindex].notEditing=false;
      }else{
        item.options[opindex].notEditing=true;
      }
    },
    removeItemOption:function (opindex,item){
      let tmp=Object.values({...item.options});
      tmp.splice(opindex,1);
      item.options=tmp;
    },
    addItemOptionAfterMe:function (opindex,item){
      let tmp=Object.values({...item.options});
      let x={};
      x.val='';
      tmp.splice(opindex+1,0,x);
      item.options=tmp;
    },
    moveUp:function (id){
      if(id==0)return;
      const a=this.arr.slice(id,id+1);
      const b=this.arr.slice(id-1,id);
      this.arr.splice(id-1,2,a[0],b[0]);
    },
    moveDown:function (id){
      if(id==this.arr.length-1)return;
      const a=this.arr.slice(id,id+1);
      const b=this.arr.slice(id+1,id+2);
      this.arr.splice(id,2,b[0],a[0]);
    },
    editMe:function (item) {
      if(item.isEditing){
        item.isEditing=false;
        console.log("请求后端保存题目(待定）");
      }else{
        item.isEditing=true;
      }
    },
    copyMe:function (item,id){
      var q=Object.create(null);
      q.isEditing=item.isEditing;
      q.title=item.title;
      q.note=item.note;
      q.type=item.type;
      switch (item.type){
        case 'dan':
            var qops=[];
            for(var i in item.options){
              var vv={};
              vv.val=item.options[i].val;
              vv.notEditing=true;
              qops.push(vv);
            }
            q.options=qops;
            q.radio=null;
            break;
        case 'mul':
          var aqops=[];
          for(var ai in item.options){
            var avv={};
            avv.val=item.options[ai].val;
            avv.notEditing=true;
            aqops.push(avv);
          }
          q.options=aqops;
          q.checked=[];
          break;
        case 'tk':
          q.text='';
          break;
        case 'rate':
          q.val=0;
          break;
      }
      this.arr.splice(id+1,0,q);
      for(var j in this.arr){
        this.arr[j].id=j;
      }
    },
    deleteMe:function (id){
      this.arr.splice(id,1);
    },
    addDan:function (){
     if(this.isAdding){
       this.Save();
     }

       this.isAdding=true;
       this.addType='dan';
       this.addDanObj.id=this.arr.length;
       this.addDanObj.isEditing=true;
       this.addDanObj.title='';
       this.addDanObj.note='';
       this.addDanObj.options=[];
       var x={};x.val='';x.notEditing=false;
       this.addDanObj.options.push(x);
       this.addDanObj.radio=null;
    },
    addMul:function (){
     if(this.isAdding){
       this.Save();
     }
       this.isAdding=true;
       this.addType='mul';
       this.addMulObj.id=this.arr.length;
       this.addMulObj.isEditing=true;
       this.addMulObj.title='';
      this.addMulObj.note='';
       this.addMulObj.options=[];
       var x={};x.val='';x.notEditing=false;
       this.addMulObj.options.push(x);
      this.addMulObj.checked=[];

    },
    addTk:function (){
     if(this.isAdding){
       this.Save();
     }
       this.isAdding=true;
       this.addType='tk';
       this.addTkObj.id=this.arr.length;
       this.addTkObj.isEditing=true;
       this.addTkObj.title='';
      this.addTkObj.note='';
       this.addTkObj.text='';

    },
    addRate:function (){
     if(this.isAdding){
       this.Save();       
     }
       this.isAdding=true;
       this.addType='rate';
       this.addRateObj.id=this.arr.length;
       this.addRateObj.isEditing=true;
       this.addRateObj.title='';
      this.addRateObj.note='';
       this.addRateObj.val=0;

    },
    Save:function (){
      switch (this.addType){
        case 'dan':this.saveDan();break;
        case 'mul':this.saveMul();break;
        case 'tk':this.saveTk();break;
        case 'rate':this.saveRate();break;
      }
      this.isAdding=false;
      this.bidati=false;
      this.addType=null;
    },
    saveDan:function (){
     var q={};
      q.id=this.addDanObj.id;
      q.isEditing=false;
      q.title=this.addDanObj.title;
      q.note=this.addDanObj.note;
      q.type=this.addDanObj.type;
      q.radio=this.addDanObj.radio;
      q.bidati=this.addDanObj.bidati;
      var qops=[];
      for(var i in this.addDanObj.options){
        var vv={};
        vv.val=this.addDanObj.options[i].val;
        vv.notEditing=true;
        qops.push(vv);
      }
      q.options=qops;
     this.arr.push(q);
    },
    saveMul:function (){
      var q={};
      q.id=this.addMulObj.id;
      q.isEditing=false;
      q.title=this.addMulObj.title;
      q.note=this.addMulObj.note;
      q.type=this.addMulObj.type;
      q.bidati=this.addMulObj.bidati;
      var qops=[];
      for(var i in this.addMulObj.options){
        var vv={};
        vv.val=this.addMulObj.options[i].val;
        vv.notEditing=true;
        qops.push(vv);
      }
      q.options=qops;
      var qches=[];
      for(var j in this.addMulObj.checked){
        var oo=this.addMulObj.checked[j];
        qches.push(oo);
      }
      console.log(qches);
      q.checked=qches;
      this.arr.push(q);
    },
    saveTk:function (){
      var q={};
      q.id=this.addTkObj.id;
      q.isEditing=false;
      q.title=this.addTkObj.title;
      q.note=this.addTkObj.note;
      q.type=this.addTkObj.type;
      q.text=this.addTkObj.text;
      q.bidati=this.addTkObj.bidati;
      this.arr.push(q);
    },
    saveRate:function (){
      var q={};
      q.id=this.addRateObj.id;
      q.isEditing=false;
      q.title=this.addRateObj.title;
      q.note=this.addRateObj.note;
      q.type=this.addRateObj.type;
      q.text=this.addRateObj.val;
      q.bidati=this.addRateObj.bidati;
      this.arr.push(q);
    },
    notSave:function (){
      this.isAdding=false;
      this.addType=null;
      this.bidati=false;
    }
  }
}
</script>

<style scoped>
body,span{
  line-hight:1.5;
}
/deep/ .el-card__body {
  padding: 0px;
}
/deep/ .el-form-item {
  background-color: unset !important;
}
/deep/ .el-radio__label{
  line-hight:1.5;
  word-break: break-all;
  white-space: normal;
  word-wrap:break-word;
}

</style>